<!--
 * @Author: 许警 11378748333@
 * @Date: 2025-06-04 13:49:30
 * @LastEditors: 许警 11378748333@
 * @LastEditTime: 2025-07-31 14:33:54
 * @FilePath: /hsxlsystem/src/views/content/video/list/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <!--  -->
    <!-- 头部 -->
    <div class="search">
      <a-form :model="formModel">
        <a-row :gutter="20">
          <a-col :span="6">
            <a-form-item label="护士姓名">
              <a-input placeholder="请输入订单号" v-model:value="formModel.name"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="手机号">
              <a-input placeholder="请输入手机号筛选" v-model:value="formModel.mobile"></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="发货状态">
              <a-select ref="select" v-model:value="formModel.isGet" placeholder="请选择渠道">
                <a-select-option v-for="(item, index) in sendBagMap" :value="index" :key="index">{{ item }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 头部 -->
    <div class="global-button">
      <a-button type="primary" @click="handleSearch(1)" class="d-a-center">搜索</a-button>
      <a-button type="primary" @click="excleData()" class="d-a-center">导出</a-button>
    </div>
    <!-- 列表 -->
    <a-table
      rowKey="id"
      :columns="columns"
      :data-source="renderData"
      bordered
      :loading="loading"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template #isGet="{ record }">
        <a-tag :color="statusColorObj[record.isGet].color">{{ sendBagMap[record.isGet] }} </a-tag>
      </template>

      <template #operation="{ record }">
        <a-button type="link" @click="cat(record)">查看</a-button>
        <a-button type="link" @click="edit(record)" v-if="record.isGet != 2">发货</a-button>
      </template>
    </a-table>

    <sendModal ref="sendModalRef" @submit="handleSearch(1)"></sendModal>
    <vipDetail ref="vipDetailRef" @submit="handleSearch(1)"></vipDetail>
  </div>
</template>
<script setup>
import { reactive, ref, watch, computed, createVNode, toRefs, defineOptions } from 'vue'
import { columnsArr, dataObj, statusColorObj, orderStatus } from './data'
import { message } from 'ant-design-vue'
import sendModal from '../components/sendModal.vue'
import vipDetail from '../components/vipDetail.vue'
// import inputModal from '@/components/common/inputModal.vue'
import { useTable, useModal, useSelects } from '@/hooks'
import { selectNurseVipList, selectNurseVipListExport } from '@/api/content/index'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { sendBagMap } from '@/utils/dict.js'

import { useStore } from 'vuex'

defineOptions({
  name: 'VideoOrder'
})
// 状态列表

const columns = columnsArr

const data = reactive(dataObj)
// 选择时间
const panelChange = (date, dateString) => {
  formModel.value.startTime = dateString[0]
  formModel.value.endTime = dateString[1]
}
const store = useStore()
const userInfo = JSON.parse(store.state.userInfo)

//必须有括号 建议箭头函数 防止深拷贝
const getParams = () => ({})

const { info, renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
  api: selectNurseVipList,
  getParams
})
handleSearch(1)

const sendModalRef = ref()
const vipDetailRef = ref()

const excleData = () => {
  const { closeModal } = useModal.confirm({
    title: `确认导出当前${pagination.total}条数据吗?`,
    icon: createVNode(ExclamationCircleOutlined),
    onOk() {
      //根据搜索条件导出
      let obj = {
        ...formModel
      }
      selectNurseVipListExport({ ...obj }).then(res => {
        let link = document.createElement('a')
        //创建一个a标签
        link.style.display = 'none'
        //将a标签隐藏
        link.href = res.object
        console.log(res.object)
        //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
        link.setAttribute('download', '订单')
        // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
        document.body.appendChild(link)
        //将上面创建的a标签加入到body的尾部
        link.click()
        closeModal()
      })
    }
  })
}

const { renderData: selectsRenderData, rowSelection } = useSelects({
  key: 'id'
})
const cat = data => {
  vipDetailRef.value.showModal(data)
}
const edit = data => {
  sendModalRef.value.showModal({ nurseId: data.nurseId })
}
</script>

<style scoped lang="less">
.search {
  // background-color: #e6e6e6;
  padding-left: 20px;
  margin-bottom: 20px;
}
</style>
